<template>
  <el-dialog title="登陆" :visible.sync="islogin" size="tiny" :show-close = "false">
    <el-form :model="form" :rules="rule" ref="form" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="name">
        <el-input type="text" v-model="form.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="form.password" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel('form')">取 消</el-button>
      <el-button type="primary" @click="confirm('form')">确 定</el-button></span>
  </el-dialog>
</template>

<script>
  import apis from '../fetch/apis'
  import {mapActions} from 'vuex'

  export default {
    data() {
      var validateName = (rule, value, callback) => {
      	if (!value) {
      		return callback(new Error('用户名不能为空'))
      	}
      	apis.validate_user({name: value, pass:""})
      		.then(res => {
      			setTimeout(() => {
		      		const data = res.data
	      			if (data.name_result == false) {
	      				callback(new Error('用户名不存在'))
	      			} else {
	      				callback()
		  			}
		      	},1000)
      		})
      		.catch(error => {
      			//为啥回调到error里了	
      			setTimeout(() => {
		      		const data = error.data
	      			if (data.name_result == false) {
	      				callback(new Error('用户名不存在'))
	      			} else {
	      				callback()
		  			}
		      	},1000)
      		})
      }
      var validatePass = (rule, value, callback) => {
      	if (value == "") {
      		return callback(new Error('密码不能为空'))
      	}
      	setTimeout(() => {
      		callback()
      	}, 1000)
      	
      }
      return {
      	form:{
      		name:"",
      		password:""
      	},
      	rule:{
      		name: [
      			{ validator: validateName, trigger: 'blur'}
      		],
      		pass: [
      			{ validator: validatePass, trigger: 'blur'}
      		],
      	}
      };
    },
    computed: {
    	islogin(){
    		return this.$store.state.login.islogin;
    	}
    },
    methods: {
      ...mapActions(['loginSuccess', 'loginFail', 'logIn']),
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      cancel(form) {
      	this.$store.state.login.islogin = false 
	  },
	  confirm(form) {
	  	this.$store.state.login.islogin = false 
	  	//去数据库检查
	  	console.log(this.form.name)	
	  	const name = this.form.name 
	  	const password = this.form.password
	  	apis.validate_user({name: name, pass: password})
	  		.then(res => {
	  			const result = res.data 
	  			if (result.name_result && result.pass_result) {
	  				alert("登录成功！")
	  				//更新登录状态
	  				this.loginSuccess()
	  				this.logIn({name:name,pass:password});
	  				//跳转到 根目录
	  				this.$router.replace({path:"/"})
	  			} else {
	  				alert("用户或密码错误");
	  			}
	  		})
	  		.catch(err => {
	  			console.log(err)
	  		})

	  	

	  }
    }
  };
</script>